<template>
	<view class="write">
		<div class="write-header">
			<text>为书籍打个分：</text>
			<div class="write-star">
				<ul>
					<li>
						<div class="comment-grayStar">
							<div class="star-img" v-for="(item,i) in starList" @click="addStar(i,item)">
								<image :src="starImg[1].img" mode=""></image>
							</div>
							<div class="comment-yellowStar">
								<div class="star-img" v-for="(item,i) in starList" v-if="item.bool"
									@click="addStar(i,item)">
									<image :src="starImg[0].img" mode=""></image>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="write-inp">
			<textarea maxlength="-1" name="" id="" cols="30" rows="10" v-model="value" @input="addValue"></textarea>
		</div>
		<div class="write-word">
			<text>已输入{{num}}/500字</text>
		</div>
		<div class="write-btn" @click="addInp()">
			<button>发送</button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				starImg: [{
					img: 'https://yuedust.yuedu.126.net/assets/mobile/images/book-detail/star-light.png?13871f2f',
					good: '../../static/赞.png'
				}, {
					img: 'https://yuedust.yuedu.126.net/assets/mobile/images/book-detail/star-dark.png?f04ab3f4',
					good: '../../static/赞-active.png'
				}],
				value: '',
				timer: null,
				starActive: 0,
				isShow: true,
				num: 0,
				starList: [{
					bool: false
				}, {
					bool: false
				}, {
					bool: false
				}, {
					bool: false
				}, {
					bool: false
				}],
				count: 0,
				writeList: {},
				book_sourceUuid: '',
				book_category: '',
				book_title: '',
				book_author: '',
				book_img: '',
				book_description: '',
			}
		},
		onLoad(options) {
			let data = JSON.parse(options.data)
			this.book_sourceUuid = data.source_uuid;
			this.book_category = data.category;
			this.book_title = data.title;
			this.book_author = data.author;
			this.book_img = data.img;
			this.book_description = data.description
		},
		methods: {
			addInp() {
				// uni.$emit('value',this.value)
				this.writeList.book_sourceUuid = this.book_sourceUuid;
				this.writeList.book_category = this.book_category;
				this.writeList.book_title = this.book_title;
				this.writeList.book_author = this.book_author;
				this.writeList.book_img = this.book_img;
				this.writeList.book_description = this.book_description;
				this.writeList.write_description = this.value;
				this.writeList.write_star = this.count;
				this.writeList.write_like = 0;
				console.log(this.writeList);
				//调用云函数，添加书架
				uniCloud.callFunction({
					name: 'write_con',
					data: {...this.writeList}
				})
				.then(content=>{
					console.log('1.0',content);
					let {result} = content;
					if(result){
						uni.showToast({
							title:'发送成功',
							icon:'success'
						})
						this.value = '';
						for(let j = 0;j<this.starList.length;j++){
							this.starList[j].bool = false
						}
					}
				})
			},
			addValue(e) {
				this.timer = setTimeout(() => {
					this.num = e.detail.value.length
				}, 1000)
			},
			addStar(i, item) {
				// console.log(item);

				for (let k = 0; k < this.starList.length; k++) {
					if (i == k) {
						if (this.starList[k].bool) {
							this.count = i
							this.starList[k].bool = false
						} else {
							this.count = i + 1
							this.starList[k].bool = true
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.write {
		width: 100%;
		height: 1246rpx;
		background-color: #fceccc;
		overflow: hidden;

		.write-header {
			width: 90%;
			margin: 30rpx auto 0;
			display: flex;
			align-items: center;

			text {
				font-size: 18px;
				font-weight: 600;
				color: #535353;

			}

			.write-star {
				ul {
					display: flex;
					list-style: none;
					padding: 0;

					li {
						position: relative;

						.comment-grayStar {
							display: flex;
							margin-top: 5rpx;

							.star-img {
								width: 34rpx;
								height: 34rpx;
								margin-left: 10rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}

						.comment-yellowStar {
							position: absolute;
							top: 0;
							left: 0;
							display: flex;
							margin-top: 5rpx;
							z-index: 100;

							.star-img {
								width: 34rpx;
								height: 34rpx;
								margin-left: 10rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
			}
		}

		.write-inp {
			width: 90%;
			margin: 30rpx auto;
			background-color: #fff;
			padding: 15rpx 20rpx;
			font-size: 14px;
			box-sizing: border-box;
		}

		.write-word {
			width: 90%;
			margin: 0 auto;
			font-size: 15px;
			color: #ABA499;
		}

		.write-btn {
			width: 90%;
			margin: 30rpx auto;

			button {
				background-color: #f69537;
				color: #fceccc;
				font-size: 14px;
				line-height: 40px;
				font-weight: 600;
			}
		}
	}
</style>